<template>
  <ele-modal
    :width="750"
    :visible="visible"
    :confirm-loading="loading"
    :title="actionStatus == 'edit' ? '修改' : '新建'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col
          :md="23"
          :sm="23"
          :xs="23"
          v-for="(item, index) in arrParmas"
          :key="index"
        >
          <selectinp
            ref="selectinpRef"
            v-model:value="form[item.value]"
            :dataValue="form[item.value]"
            :itemData="item"
            :validateInfos="validateInfos"
            :actionStatus="props.actionStatus"
            :estraparmas="estraParmas"
            @action="action"
            @getData="getData"
          />
        </a-col>
      </a-row>
    </a-form>
    <reason-list
      v-if="reasonListShow"
      v-model:visible="reasonListShow"
      @getReason="getReason"
    />
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Form } from 'ant-design-vue';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import selectinp from './selectInput.vue';
  import reasonList from './reasonList.vue';
  import {
    get_warehouse_list,
    get_store_list,
    get_store_group_list,
    get_user_list,
    get_supplier_list
  } from '@/api/jewelry/receipts_purchase';
  import {
    receipts_purchase_detail,
    get_reason_list
  } from '@/api/jewelry/receipts_return';
  import { get_list } from '@/api/material/receipts_templete';

  // 表格列配置
  const useForm = Form.useForm;

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    // 编辑edit/新建add
    actionStatus: String,
    // 编辑数据id
    editData: Object,
    storeId: String
  });

  const emit = defineEmits(['done', 'update:visible']);

  // 提交状态
  const loading = ref(false);
  const arrParmas = ref([]);
  const form = reactive({});
  const rules = reactive({});
  const reasonListShow = ref(false);
  const estraParmas = ref({});
  const estraParmas2 = ref({});

  const action = () => {
    reasonListShow.value = true;
  };
  const getData = (data) => {
    console.log('####', data);
    estraParmas2.value = data;
  };

  onMounted(async () => {
    await get_list({ page: 1, model_type: 3 }).then(async (res) => {
      arrParmas.value = [];
      await res.list.forEach((item, index) => {
        arrParmas.value.push({
          type: item.column_type,
          label: item.name,
          value: item.column,
          params: item.params,
          require: item.require
        });
        if (item.column == 'retail_type' || item.column == 'labor_type') {
          arrParmas.value[index].options = item.params;
        }
        form[item.column] = '';
        rules[item.column] = [
          {
            required: item.require == 1 ? true : false,
            message:
              item.column_type === 'select' ||
              item.column_type === 'selectajax' ||
              item.column_type === 'selectajaxlike'
                ? `请选择${item.name}`
                : `请输入${item.name}`,
            trigger: 'change'
          }
        ];
      });
    });
    await get_warehouse_list({ page: 1, page_size: 5000 }).then((res) => {
      let options = [];
      res.list.map((item) => {
        options.push({
          value: String(item.code),
          label: item.name
        });
      });
      arrParmas.value.forEach((item) => {
        if (item.value == 'come_type_code') {
          item.options = options;
        }
      });
    });
    await get_supplier_list({ page: 1, page_size: 9999 }).then((res) => {
      let options = [];
      res.list.map((item) => {
        options.push({
          value: String(item.code),
          label: item.name
        });
      });
      arrParmas.value.forEach((item) => {
        if (item.value == 'supplier_code') {
          item.options = options;
        }
      });
    });
    await getReason();

    if (props.editData.code) {
      form.code = props.editData.code;
      await receipts_purchase_detail({ code: props.editData.code }).then(
        (res) => {
          Object.keys(form).forEach((key) => {
            //form[key] = res.receipts_detail && res.receipts_detail[key] ? res.receipts_detail[key] : '';
            if (res.receipts_detail[key]) {
              if (typeof res.receipts_detail[key] == 'number') {
                form[key] = res.receipts_detail[key].toString();
              } else {
                form[key] = res.receipts_detail[key];
              }
            } else {
              form[key] = '';
            }
          });
          estraParmas.value.price = res.receipts_detail.price;
          estraParmas.value.weight = res.receipts_detail.weight;
          estraParmas.value.gold_category_code =
            res.receipts_detail.gold_category_code;

          console.log('estraParmas.value', estraParmas.value);
        }
      );
    }
  });

  const getReason = () => {
    get_reason_list({ page: 1, page_size: 9999, filters:{receipts_type:3} }).then(
      (res) => {
        let options = [];
        res.data.map((item) => {
          options.push({
            value: String(item.id),
            label: item.content
          });
        });
        arrParmas.value.forEach((item) => {
          if (item.value == 'refund_cause') {
            item.options = options;
          }
        });
      }
    );
  };

  const { validate, validateInfos } = useForm(form, rules);
  /* 保存编辑 */
  const save = () => {
    validate()
      .then(() => {
        Object.assign(form, estraParmas2.value);
        console.log('form', form);
        emit('done', form);
      })
      .catch(() => {});
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
<style scoped></style>
